import React from 'react';
import { NetworkStatus } from '@apollo/client';
import { Box, ListBase, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import ContractsHeader from 'beta/components/contracts-header/ContractsHeader';
import { ErrorBanner } from 'beta/components/error/ErrorBanner';
import UI from 'beta/store/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useRouter } from 'next/router';
import { ContractStatus, useContractsQuery } from 'typings/graphql';

import { SettingsButtons } from '../components/SettingsButtons';

type MoveSettingsContainerProps = {
  serviceId: string;
  color: MainColorType;
  ui?: UI;
};

const MoveSettingsContainer = ({ serviceId, color, ui }: MoveSettingsContainerProps) => {
  const { t } = useTranslation(['stillingar', 'errors']);
  const router = useRouter();
  const customerId = typeof router?.query?.customerId === 'string' ? router?.query?.customerId : '';

  const { data, loading, error, networkStatus, refetch } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  const contract = data?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;

  if (
    loading ||
    error ||
    !data?.contracts.contracts ||
    (variant?.__typename !== 'SubscriptionVariant' &&
      variant?.__typename !== 'ProvisionedSubscriptionVariant')
  )
    return (
      <>
        {loading && <ContractsHeader title={t('service:invoice.loading')} />}
        <ErrorBanner
          eyebrowTexts={[
            t('errors:settings.move.eyebrows.1'),
            t('errors:settings.move.eyebrows.2'),
            t('errors:settings.move.eyebrows.3'),
          ]}
          titles={[
            t('errors:settings.move.titles.1'),
            t('errors:settings.move.titles.2'),
            t('errors:settings.move.titles.3'),
          ]}
          descriptions={[
            t('errors:settings.move.descriptions.1'),
            t('errors:settings.move.descriptions.2'),
            t('errors:settings.move.descriptions.3'),
          ]}
          icon="zap"
          color={ui?.serviceColor ?? 'attention'}
          showLoading={loading || networkStatus === NetworkStatus.refetch}
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );

  return (
    <Box>
      <Box>
        <Text variant="pLargeBold" color="black100" marginBottom={3}>
          {t('moveSettings.subtitle')}
        </Text>
      </Box>
      <Box>
        <Text>{t('moveSettings.description')}</Text>
        <SettingsButtons
          confirmButton={{
            text: t('moveSettings.button'),
            colorScheme: color,
            dottedShadow: 'none',
            onClick: () => {
              router.push({
                pathname: `/beta/${router.query.customerId}/thjonustur/${router.query.serviceId}/flutningur`,
                query: { step: 1 },
              });
            },
            icon: 'longArrowRight',
          }}
        />
      </Box>
    </Box>
  );
};

export default MoveSettingsContainer;